<template>
  <div>
    <zeda-dialog
      v-model="visible"
      width="1000px"
      title="查看详情"
      :before-close="handleClose"
    >
      <Title name="负载参数设置详情" :line="true" slot="green">
        <desc-base-info
          :data="info"
          :colnum-info="colnumInfo"
          align="right"
          :no-line-height="true"
          label-width="120px"
          class="base-info"
        ></desc-base-info>
      </Title>
      <Title name="24节气时区表" :line="false" class="mt20">
        <el-table :data="info.timeZone" border>
          <el-table-column prop="name" label="节气"></el-table-column>
          <el-table-column prop="timePeriodTableCode" label="时段表">
            <template slot-scope="scope">
              {{
                scope.row.timePeriodTableCode === 1
                  ? "时段表1"
                  : scope.row.timePeriodTableCode === 2
                  ? "时段表2"
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column prop="month" label="月"></el-table-column>
          <el-table-column prop="day" label="日"></el-table-column>
        </el-table>
      </Title>
      <Title name="时段表" :line="false">
        <el-table :data="info.list1" border>
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="feeType" label="费率">
            <template slot-scope="scope">
              {{ scope.row.feeType | dictFee }}
            </template>
          </el-table-column>
          <el-table-column prop="hour" label="时"></el-table-column>
          <el-table-column prop="minute" label="分"></el-table-column>
        </el-table>
        <el-table :data="info.list2" border class="mt20">
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="feeType" label="费率">
            <template slot-scope="scope">
              {{ scope.row.feeType | dictFee }}
            </template>
          </el-table-column>
          <el-table-column prop="hour" label="时"></el-table-column>
          <el-table-column prop="minute" label="分"></el-table-column>
        </el-table>
      </Title>

      <form-button
        slot="footer"
        cancel-text="关闭"
        :show-submit-button="false"
        @cancel="handleClose"
      ></form-button>
    </zeda-dialog>
  </div>
</template>
<script>
import { detail } from "@/api/iot/water";
import Title from "@/components/Title";
import FormButton from "@/components/FormButton";
import { dealElectricity } from "@/utils/index";
export default {
  components: {
    Title,
    FormButton,
  },
  filters: {
    dictFee(val) {
      const arr = ["-", "尖峰", "高峰", "平常", "低谷"];
      let result = arr[val];
      return result;
    },
  },
  props: {
    visible: { type: Boolean, default: false },
    id: { type: [String, Number], default: "" },
  },
  data() {
    return {
      info: {},
    };
  },
  computed: {
    colnumInfo({ info }) {
      const {
        deviceSwitch,
        remoteControl,
        powerFrequency,
        newPurchaseAmount,
        alarmAmount1,
        alarmAmount2,
        remainingAmount,
        peakSectionPrice,
        spikeSectionPrice,
        valleySectionPrice,
        flatSectionPrice,
      } = info;
      return [
        {
          label: "数据上传间隔",
          prop: "uploadInterval",
          unit: "分钟",
          colNum: 2,
        },
        { label: "户号", prop: "accountNo", colNum: 2 },
        { label: "仪表编码", prop: "deviceCode", colNum: 2 },
        { label: "IP地址", prop: "ip", colNum: 2 },
        { label: "电网频率", value: powerFrequency / 100, colNum: 2 },
        { label: "购电次数", prop: "purchaseNum", colNum: 2 },
        {
          label: "电表运行状态",
          value: deviceSwitch === 0 ? "开启" : deviceSwitch === 1 ? "关闭" : "",
          colNum: 2,
        },
        {
          label: "强制分合闸",
          value:
            remoteControl === 1 ? "开启" : remoteControl === 0 ? "关闭" : "",
          colNum: 2,
        },
        { label: "电压变比PT", prop: "pt", colNum: 2 },
        { label: "电量变比CT", prop: "ct", colNum: 2 },
        {
          label: "报警功率",
          prop: "alarmPower",
          unit: "瓦",
          colNum: 2,
        },
        {
          label: "报警电量1",
          value: dealElectricity(alarmAmount1),
          unit: "元",
          colNum: 2,
        },
        {
          label: "报警电量2",
          value: dealElectricity(alarmAmount2),
          unit: "元",
          colNum: 2,
        },
        {
          label: "新购电量",
          value: dealElectricity(newPurchaseAmount),
          unit: "元",
          colNum: 2,
        },
        {
          label: "剩余电量",
          value: dealElectricity(remainingAmount),
          unit: "元",
          colNum: 2,
        },
        {
          label: "尖峰单价",
          value: dealElectricity(spikeSectionPrice, 10000),
          unit: "元/KWH",
          colNum: 2,
        },
        {
          label: "高峰单价",
          value: dealElectricity(peakSectionPrice, 10000),
          unit: "元/KWH",
          colNum: 2,
        },
        {
          label: "平常单价",
          value: dealElectricity(flatSectionPrice, 10000),
          unit: "元/KWH",
          colNum: 2,
        },
        {
          label: "低谷单价",
          value: dealElectricity(valleySectionPrice, 10000),
          unit: "元/KWH",
          colNum: 2,
        },
      ];
    },
  },
  watch: {
    visible(value) {
      if (value && String(this.id).length > 0) {
        this.getInfo();
      }
    },
  },
  methods: {
    getInfo() {
      detail(this.id)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.info = res.data;
          this.info.list1 =
            res.data.timePeriod1 && res.data.timePeriod1.length > 0
              ? res.data.timePeriod1.filter((item) => item.feeType)
              : [];
          this.info.list2 =
            res.data.timePeriod2 && res.data.timePeriod2.length > 0
              ? res.data.timePeriod2.filter((item) => item.feeType)
              : [];
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!300052");
        });
    },
    handleClose(status) {
      this.$emit("close", typeof status === "boolean" ? status : false);
    },
  },
};
</script>
